<template>
  <div class="container">
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item :label="$t('employer_permissions')">
        <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand()">{{
          $t("expand_collapse")
        }}</el-checkbox>
        <el-checkbox
          v-model="menuNodeAll"
          @change="handleCheckedTreeNodeAll($event)"
          >{{ $t("elect_all_don_select_all") }}</el-checkbox
        >
        <el-tree
          class="tree-border"
          :data="menuOptions"
          show-checkbox
          ref="menu"
          node-key="id"
          empty-text="loading.."
          :props="defaultProps"
        ></el-tree>
      </el-form-item>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
      style="
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 40px;
      "
    >
      <el-button type="primary" @click="submitForm">{{
        $t("confirm")
      }}</el-button>
    </div>
  </div>
</template>

<script>
import {
  treeselect as menuTreeselect,
  roleMenuTreeselect,
} from "@/api/system/menu";
export default {
  data() {
    return {
      menuExpand: false,
      menuNodeAll: false,
      defaultProps: {
        children: "children",
        label: "label",
      },
      form: {},
      // 菜单列表
      menuOptions: [],
      // 表单校验
      // rules: {},
      // 日期范围
      // dateRange: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roleName: undefined,
        roleKey: undefined,
        status: undefined,
      },
    };
  },
  created() {
    this.form.deptCheckStrictly = true;

    this.getMenuTreeselect();
    this.$forceUpdate();
  },
  methods: {
    /** 查询菜单树结构 */
    getMenuTreeselect() {
      menuTreeselect().then((response) => {
        this.menuOptions = response.data;
      });
    },
    // 树权限（全选/全不选）
    handleCheckedTreeNodeAll(value) {
      this.$refs.menu.setCheckedNodes(value ? this.menuOptions : []);
    },
    handleCheckedTreeExpand() {
      for (let i = 0; i < this.menuOptions.length; i++) {
        this.$refs.menu.store.nodesMap[this.menuOptions[i].id].expanded =
          this.menuExpand;
      }
    },
    // 所有菜单节点数据
    getMenuAllCheckedKeys() {
      // 目前被选中的菜单节点
      let checkedKeys = this.$refs.menu.getCheckedKeys();
      // 半选中的菜单节点
      let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
      return checkedKeys;
    },
    /** 根据角色ID查询菜单树结构 */
    getRoleMenuTreeselect(roleId) {
      return roleMenuTreeselect(roleId).then((response) => {
        this.menuOptions = response.menus;
        return response;
      });
    },
    submitForm: function () {
      if (this.getMenuAllCheckedKeys() && this.getMenuAllCheckedKeys().length) {
        console.log(this.getMenuAllCheckedKeys());
      } else {
        this.$message.warning(
          this.$t("please_select", { name: this.$t("permissions") })
        );
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
